<!-- Basic UI for running the demo in the browser -->

<html>
  <head>
    <title>Point In Polygon</title>
    <style>
      .error {
        color: #FF0000;
      }

      #role1, #role2 {
        display: none;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="/dist/jiff-client.js"></script>

    <script src="/bignumber.js/bignumber.min.js"></script>
    <script src="/lib/ext/jiff-client-bignumber.js"></script>
    <script src="/lib/ext/jiff-client-fixedpoint.js"></script>
    <script src="/lib/ext/jiff-client-negativenumber.js"></script>
    <script src="/lib/ext/jiff-client-performance.js"></script>

    <!-- Contains geometry helpers -->
    <script src="./geometry.js"></script>

    <!-- Contains UI Handlers and Input Checks -->
    <script type="text/javascript" src="./client.js"></script>

    <!-- Contains the MPC implementation -->
    <script type="text/javascript" src="./mpc.js"></script>
  </head>
  <body>

    <div style="width:500px; height:500px;">
        <canvas id="myChart" width="500" height="500"></canvas>
    </div>

    <h1>Connect JIFF</h1>
    <label for="computation_id">Computation ID</label><input id="computation_id" value="test"></input><br/><br/>
    <!-- <label for="count">Party Count</label> <input id="count" pattern="[0-9]*" value="2"><br/><br/> -->
    <label for="role">Party Role</label>
    <select id="role">
      <option value="1">Provide Polygon</option>
      <option value="2">Provide Point Coordinates</option>
    </select><br/><br/>
    <button id="connectButton" onclick="connect();">Connect</button>
    <br/><br/>
    <hr/>
    <h1>PIP, Is point in polygon?</h1>
    <div id="role1">
      <p>Provide the polygon vertices: the convex hull will be automatically constructed for you.</p>
      <p>Polygons with a side having a high (or infinite) slope are not acceptable.</p>
      <div class="row">
        &nbsp; &nbsp; &nbsp;
        <label for="inputX1">X: </label> <input id="inputX1" pattern="^-?[0-9]+$" size="3"> &nbsp;
        <label for="inputY1">Y: </label> <input id="inputY1" pattern="^-?[0-9]+$" size="3"> &nbsp;
        <button onclick="addVertix();" id="vertixButton">Add</button> <br/>
      </div> <br/>

      <button onclick="submitPolygon();" id="submit1Button" disabled="disabled">Start</button><br/>
    </div>

    <div id="role2">
      <p>Provide the point to test: the computation will show whether the point is in the polygon (including its sides) or out.</p>
      <div class="row">
        &nbsp; &nbsp; &nbsp;
        <label for="inputX2">X: </label> <input id="inputX2" pattern="^-?[0-9]+$" size="3"> &nbsp;
        <label for="inputY2">Y: </label> <input id="inputY2" pattern="^-?[0-9]+$" size="3"> <br/>
      </div> <br/>

      <button onclick="submitPoint();" id="submit2Button">Start</button><br/>
    </div>
    <br/><br/>
    <div id="output"></div>
    <div id="perfDiv"></div>
  </body>
</html>
